<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      <p v-for="item in items" :key>
        1、在写v-for的时候,都需要给元素加上一个key属性
        2.key的主要作用就是用来提高渲染性能的!
        3.key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)</p>
     -->
    <script src="../lib/vue.js"></script>
    <div id="app">
      <p v-for="item in items">{{item}}</p>
      <p v-for="(item,index) in items">{{index}}----{{item}}</p>

      <p v-for="item in items2">名字：{{item.name}} 年龄：{{item.age}}</p>

      <p v-for="(item,index) in items2">
        {{index}}名字：{{item.name}} 年龄：{{item.age}}
      </p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: ['a', 'b', 'c'],
          items2: [
            { name: 'xxx', age: 19 },
            { name: 'yyy', age: 18 },
            { name: 'eee', age: 16 },
          ],
        },
      })
    </script>
  </body>
</html>
